<template>
  <section>
    <div class="admin_content">
      <div class="content_bg">
        <img
          v-if="SystemSettingPictures.loginBigBackground"
          :style="paticles_height"
          class="wid10"
          :src="SystemSettingPictures.loginBigBackground"
          alt="loginBigBackground"
        />
        <!--        src="@/assets/login/loginBg_img.png"-->
      </div>
      <div class="content_login">
        <dl class="admin_login">
          <div
            class="content_bg1"
            v-if="SystemSettingPictures.loginSmallBackground"
          >
            <img
              style="height:390px;"
              :src="SystemSettingPictures.loginSmallBackground"
              alt=""
            />
          </div>
          <el-row :span="24">
            <el-col style="padding:30px" :span="14">
              <div style="height:100px;padding-top:85px;">
                <div class="admin-zhehzhao"></div>
                <!--                src="@/assets/login/loginLogo_img.png"-->
                <img
                  :src="SystemSettingPictures.loginLogo"
                  alt
                  style="float: left;width:130px;"
                />
                <dt class="admin-font">
                  <!--                  <strong style="color: white">{{ $appConf.appTitle }}</strong>-->
                  <strong style="color: white">{{
                                               SystemSettingPictures.systemName
                                               }}</strong>
                  <strong style="color: white;font-size: 23px">{{
                                                               sysPub
                                                               }}</strong>
                </dt>
              </div>
            </el-col>
            <!--             style="padding:30px;background: rgba(102, 158, 50, 0.7)"-->
            <el-col
              :style="{
                padding: '30px',
                background: SystemSettingPictures.loginColor
              }"
              :span="10"
            >
              <div
                class="scanSwitch"
                @click="scanSwitch"
                v-if="
                  SystemSettingPictures.dingLoginRetry ||
                    SystemSettingPictures.appLoginRetry
                "
              >
                <img
                  :src="isScan ? ewm_icon : mm_icon"
                  style="width: 3rem;"
                  alt="icon"
                />
              </div>
              <div v-if="showLogin">
                <el-form
                  v-if="isScan"
                  :model="loginForm"
                  :rules="rules"
                  ref="loginForm"
                  label-position="left"
                  label-width="0px"
                >
                  <dt><strong style="color: white"> 用户登录</strong></dt>
                  <dd class="user_icon" style="margin-bottom: 10px">
                    <el-form-item prop="username">
                      <el-input
                        type="text"
                        v-model="loginForm.username"
                        auto-complete="off"
                        placeholder="账号 / 手机号"
                        prefix-icon="el-icon-user"
                      ></el-input>
                    </el-form-item>
                  </dd>
                  <dd class="pwd_icon" style="margin-bottom: 10px">
                    <el-form-item prop="password">
                      <el-input
                        type="password"
                        v-model="loginForm.password"
                        @keyup.enter.native="login"
                        auto-complete="off"
                        placeholder="密码"
                        prefix-icon="el-icon-lock"
                      ></el-input>
                    </el-form-item>
                  </dd>
                  <dd class="val_icon" style="margin-bottom: 10px">
                    <el-row>
                      <el-col :span="16">
                        <el-input
                          v-model="loginForm.verifyCode"
                          @keyup.enter.native="login"
                          auto-complete="off"
                          placeholder="验证码"
                          prefix-icon="fa fa-shield"
                        ></el-input>
                      </el-col>
                      <el-col :span="8">
                        <span
                          @click="changeImgCode"
                          style="display: inline-block;height: 37px;border: 1px solid #D7D7D7;margin-left: 3px;"
                        >
                          <img
                            :src="imgCode"
                            style="width: 100%;height: 100%;cursor: pointer;"
                          />
                        </span>
                      </el-col>
                    </el-row>
                  </dd>
                  <dd style="display: flex;justify-content: space-between;">
                    <router-link
                      style="color:white;font-size: 14px;cursor:pointer;"
                      :to="{
                        name: 'forgetPassword'
                      }"
                      target="_blank"
                      rel="opener"
                    >忘记密码
                    </router-link
                    >
                  </dd>
                  <dd style="margin-bottom:10px;opacity: 1">
                    <el-button
                      class="submit_btn"
                      :style="{ color: SystemSettingPictures.loginColor }"
                      @click.native.prevent="login"
                      :loading="loading"
                      @keyup.enter="handleAddBook"
                    >登录
                    </el-button>
                  </dd>
                  <div
                    v-if="SystemSettingPictures.smsVerificationCodeRetry"
                    @click="noteLogin"
                    style="color:white;font-size: 14px;cursor:pointer;text-align:center"
                  >
                    短信登录
                  </div>
                  <!--              <dd>-->
                  <!--                <p>{{ copyInfo }}</p>-->
                  <!--              </dd>-->
                </el-form>
                <div v-else style="color: white;">
                  <div class="scanTitle">扫码登陆</div>
                  <div style="height:249px">
                    <div style="padding:10px 0">
                      <div
                        style="height:200px;margin: 5px 25px;padding:10px;background-color:white;border-radius: 5px;overflow:hidden;text-align: center;"
                      >
                        <div v-if="isAppScan">
                          <img
                            v-if="showQrCode"
                            style="width:200px;"
                            :src="src"
                            alt="二维码"
                          />
                          <div
                            class="el-icon-success"
                            style="color:#67C23A;margin-top:80px;font-size:14px"
                          >
                            {{ tipText }}
                          </div>
                          <div
                            style="color:#909399;margin-top:80px;font-size: 14px;"
                          >
                            <span
                              style="cursor:pointer;"
                              @click="showQrCode = true"
                            >返回</span
                            >
                          </div>
                        </div>
                        <span v-else ref="ddLogin" id="ding-login"></span>
                      </div>
                    </div>
                  </div>
                  <div
                    style="text-align:center;border-radius: 5px; margin-top: 15px;"
                  >
                    <template
                      v-if="
                        SystemSettingPictures.appLoginRetry &&
                          SystemSettingPictures.dingLoginRetry
                      "
                    >
                      <span
                        :class="isAppScan ? 'active' : ''"
                        class="changeBtn left"
                        @click="appLogin"
                      >APP扫码登陆</span
                      >
                      <span
                        :class="isAppScan ? '' : 'active'"
                        class="changeBtn right"
                        @click="ddLogin"
                      >钉钉扫码登陆</span
                      >
                    </template>
                    <template v-else>
                      <span
                        v-if="SystemSettingPictures.dingLoginRetry"
                        class="changeBtn right right active"
                        @click="ddLogin"
                      >钉钉扫码登陆</span
                      >
                      <span
                        v-if="SystemSettingPictures.appLoginRetry"
                        class="changeBtn left right active"
                        @click="appLogin"
                      >APP扫码登陆</span
                      >
                    </template>
                  </div>
                </div>
              </div>
              <div v-else style="color:white">
                <div
                  style="margin:20px 0;text-align:center;font-size:25px;font-weight:bolder"
                >
                  短信登录
                </div>
                <div style="margin:20px 0">
                  <el-input
                    class="mobileLogin"
                    v-model="mobile"
                    placeholder="请输入手机号"
                    refix-icon="el-icon-phone-outline"
                  ></el-input>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-input
                        class="mobileLogin"
                        v-model="mobileCode"
                        @keyup.enter.native="mobileLogin"
                        placeholder="请输入验证码"
                        refix-icon="el-icon-chat-line-square"
                      >
                      </el-input
                      >
                    </el-col>
                    <el-col :span="12">
                      <el-button
                        type="primary"
                        style="border:none;color: rgba(102, 158, 50, 0.7);background-color:white;margin: 10px 0px;height: 40px;width: 100%;text-align: center;padding: 9px;"
                        size="medium"
                        @click="sendMsg"
                        :disabled="msgLoading"
                      >
                        {{ msgLoading ? "重新发送" : "发送验证码" }}
                        <span v-if="msgLoading">({{ sec }}s)</span>
                      </el-button>
                    </el-col
                    >
                  </el-row>
                  <el-button
                    type="primary"
                    style="border:none;width:100%;margin:10px 0;color: rgba(102, 158, 50, 0.7);background-color:white;"
                    size="medium"
                    :loading="mobileLoading"
                    @click="mobileLogin"
                  >登录
                  </el-button
                  >
                </div>
                <div
                  style="cursor:pointer;text-align:center"
                  @click="showLogin = true"
                >
                  <i class="el-icon-d-arrow-left"></i>
                  账号密码登录
                </div>
              </div>
            </el-col>
          </el-row>
        </dl>
      </div>
    </div>
    <el-dialog
      :title="titleCode"
      :visible.sync="showImgCode"
      width="20%"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="16">
          <el-input
            v-model="verifyCoder"
            auto-complete="off"
            placeholder="验证码"
            prefix-icon="fa fa-shield"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <span
            @click="changeImgCode"
            style="display: inline-block;height: 37px;border: 1px solid #D7D7D7;margin-left: 3px;"
          >
            <img
              :src="imgCode"
              style="width: 100%;height: 100%;cursor: pointer;"
            />
          </span>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showImgCode = false">取 消</el-button>
        <el-button
          type="primary" @click="sendMsgCode" style="color:white"
        >发 送</el-button
        >
      </span>
    </el-dialog>
    <footer>
      <a
        v-if="SystemSettingPictures.internetContentProvider"
        href="https://beian.miit.gov.cn/#/Integrated/index"
        target="_blank"
        style="margin-right:10px"
      >
        备案号：{{ SystemSettingPictures.internetContentProvider }}
      </a>
      <span
        v-if="SystemSettingPictures.technicalServicePersonnelInfoRetry"
        style="white-space: pre;"
      >
        {{ SystemSettingPictures.technicalServicePersonnelInfo }}
      </span>
    </footer>
  </section>
</template>

<script>
import md5 from "js-md5";
import { mapGetters } from "vuex";
import qs from "qs";
import qrCode from "@/libs/qrcode";
import uuidMixin from "@/mixins/uuid";
import _ from "lodash";
import schema from "async-validator";

let appid = window.api.ddAppId;
let redirect = encodeURIComponent(window.api.ddRedirect);
let http_url = encodeURIComponent(
  `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${redirect}`
);
import ewm_icon from "@/assets/ewm_icon_slices/ewm_icon.png";
import mm_icon from "@/assets/mm_icon_slices/mm_icon.png";
import def from "@/assets/template_sign.png";

export default {
  mixins: [uuidMixin],
  created() {
    redirect && appid && (this.showDD = true);
    // 如果临时登录吗存在，执行登录方法
    this.code = this.$route.query.code;
    let state = this.$route.query.state;

    // 获取到扫码结果，并且跳转获取临时登录码
    var handleMessage = function(event) {
      var origin = event.origin;
      if (origin == "https://login.dingtalk.com") {
        //判断是否来自ddLogin扫码事件。
        // 拿到 loginTmpCode 后，跳转连接拿到临时登陆码，之后返回到跳转的地址，会携带临时登陆码
        var loginTmpCode = event.data;
        let url = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${http_url}&loginTmpCode=${loginTmpCode}`;
        // 这边直接打开拼接好的连接，去获取临时登录码，回来地址在下面
        location.href = url;
      }
    };
    if (typeof window.addEventListener != "undefined") {
      window.addEventListener("message", handleMessage, false);
    } else if (typeof window.attachEvent != "undefined") {
      window.attachEvent("onmessage", handleMessage);
    }

    window.sessionStorage.setItem("appKey", "mainSite");
    window.sessionStorage.setItem("token", "");
    this.setClientHeightF();
    this.keyupEnter();
    this.getPicture();
    this.src = def;
  },
  mounted() {
    if (this.code) {
      /* 这里写登录方法 */
      console.log(this.code, state, "拿到code了");
      this.dingLoginAuth(this.code, state);
    }
  },
  data() {
    return {
      def,
      ewm_icon,
      mm_icon,
      sec: 60,
      verifyCoder: "",
      titleCode: "您的操作过于频繁，请输入验证码",
      mobile: "",
      mobileCode: "",
      isScan: true,
      showLogin: true,
      isAppScan: true,
      SystemSettingPictures: {},
      code: "", // 获取的临时登陆码
      imgCode: window.api.codeUrl,
      showImgCode: false,
      showDD: false,
      msgLoading: false,
      showQrCode: true,
      mobileLoading: false,
      showNoteDialog: false,
      loginForm: {
        username: "",
        verifyCode: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "change" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" }
        ],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "change" }
        ]
      },
      loading: false,
      sysName: "",
      src: "",
      copyInfo: "",
      sysPub: "综合办公系统",
      tipText: "已扫码，确认登录",
      par_color: "#ffffff",
      firstMenu: null // 第一个菜单
    };
  },
  computed: {
    ...mapGetters({
      clientHeight: "clientHeight"
    }),
    paticles_height() {
      return { height: this.clientHeight };
    },
    footer() {
      return "© 2017-" + new Date().getFullYear() + " 洛阳三智 技术支持";
    }
  },
  watch: {
    isAppScan(v) {
      if (!v) {
        this.socket.close();
      }
    },
    showImgCode(v) {
      if (!v) {
        this.verifyCoder = "";
      } else {
        this.changeImgCode();
      }
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
    }
  },
  methods: {
    timerSec() {
      let id = setInterval(() => {
        this.sec -= 1;
        if (this.sec == 0) {
          this.msgLoading = false;
          this.sec = 60;
          clearInterval(id);
        }
      }, 1000);
    },
    mobileLogin() {
      if (!this.mobile && !this.mobileCode) {
        return this.warning("请输入手机号和验证码");
      }
      this.mobileLoading = true;
      this.API.VerifyLoginVerifyCode({
        mobile: this.mobile,
        code: this.mobileCode
      })
        .then(ret => {
          let { value } = ret.data;
          window.sessionStorage.setItem("token", value);
          window.localStorage.setItem("clearInfo", "");
          this.getAllDic();
          this.getAllMenu();
          this.getSystem();
          this.mobileLoading = false;
        })
        .catch(err => {
          this.mobileLoading = false;
        });
    },
    sendMsg() {
      if (!this.mobile) return this.warning("请输入手机号");
      this.API.findLoginCode({
        mobile: this.mobile
      }).then(ret => {
        let { data } = ret;
        console.log(ret);
        if (data == 201) {
          this.showImgCode = true;
        } else {
          this.success("发送成功");
          this.msgLoading = true;
          this.timerSec();
        }
      });
    },
    sendMsgCode() {
      if (!this.verifyCoder) return this.warning("请输入图形验证码");
      this.API.findLoginVerifyCode({
        mobile: this.mobile,
        code: this.verifyCoder
      })
        .then(ret => {
          let { data } = ret;
          console.log(ret);
          if (data == 201) {
            this.showImgCode = true;
          } else {
            this.success("发送成功");
            this.showImgCode = false;
            this.msgLoading = true;
            this.timerSec();
          }
        })
        .catch(err => {
          this.changeImgCode();
        });
    },
    noteLogin() {
      this.showLogin = false;
    },
    scanSwitch() {
      this.showLogin = true;
      this.isScan = !this.isScan;
      if (
        this.SystemSettingPictures.appLoginRetry &&
        this.SystemSettingPictures.dingLoginRetry
      ) {
        this.appLogin();
      } else if (this.SystemSettingPictures.appLoginRetry) {
        this.appLogin();
      } else if (this.SystemSettingPictures.dingLoginRetry) {
        this.ddLogin();
      }
    },
    refreshCode() {
      this.API.getQrCode().then(ret => {
        let { value } = ret.data;
        let url =
          "http:" + window.api.domain + value + "?connectionId=" + this.uuid;
        let base64 = qrCode.outputQRCodeBase64(url, {});
        this.src = base64;
      });
    },
    appLogin() {
      this.isAppScan = true;
      this.refreshCode();
      this.connect();
    },
    ddLogin() {
      this.isAppScan = false;
      this.dingLogin();
    },
    // 连接socket
    connect() {
      const socketUrl = window.api.socketUrl + "0/?connectionId=" + this.uuid;

      this.socket = new WebSocket(socketUrl);
      // 监听socket打开
      this.socket.onopen = function() {
        console.log("浏览器WebSocket已打开");
      };
      let that = this;
      // 监听socket消息接收
      this.socket.onmessage = msg => {
        // 转换为json对象
        const data = JSON.parse(msg.data);
        console.log(data);
        let { message } = data.message;
        switch (data.type) {
          case "CODE_VERIFY":
            this.showQrCode = false;
            this.tipText = message;
            break;
          case "CONFIRM_LOGIN":
            this.tipText = message;
            let { key, value } = data.message.list[0];
            sessionStorage.setItem(key, value);
            window.localStorage.setItem("clearInfo", "");
            this.getAllDic();
            this.getAllMenu();
            this.getSystem();
            break;
        }
      };
      // 监听socket错误
      this.socket.onerror = function() {
        that.$notify({
          title: "错误",
          message: "服务器异常，SOCKET已断开",
          type: "error",
          duration: 0
        });
      };
      // 监听socket关闭
      this.socket.onclose = function() {
        console.log("WebSocket已关闭");
      };
    },
    //获取系统配置图片和颜色
    getPicture() {
      this.API.getSystemSettingStatic().then(ret => {
        this.SystemSettingPictures = ret.data;
        //没有图片时的默认图片地址数组 对应服务端传的字段
        const defaultAddress = [
          { key: "indexLogo", address: "system/indexLogo.png" },
          { key: "indexSystemName", address: "system/indexSystemName.png" },
          { key: "loginBigBackground", address: "system/loginBackground.png" },
          { key: "loginLogo", address: "system/loginLogo.png" },
          { key: "loginSmallBackground", address: "" }
        ];
        //fixme 政务服务中心需要用image1
        // defaultAddress.map(item => {
        //   this.SystemSettingPictures[item.key] = this.SystemSettingPictures[
        //     item.key
        //     ]
        //     ? window.api.image1 + this.SystemSettingPictures[item.key]
        //     : item.address
        //       ? window.api.image1 + item.address
        //       : "";
        // });
        defaultAddress.map(item => {
          this.SystemSettingPictures[item.key] = this.SystemSettingPictures[
            item.key
            ]
            ? window.api.image + "/" + this.SystemSettingPictures[item.key]
            : item.address
              ? window.api.image + "/" + item.address
              : "";
        });
        window.sessionStorage.setItem(
          "systemConfig",
          JSON.stringify(this.SystemSettingPictures)
        );
      });
    },
    // 切换钉钉登录
    dingLogin() {
      // 这边需要用 $nextTick() 方法来等DOM渲染完成后，才能获取到盒子容器
      this.$nextTick(() => {
        // 钉钉登录
        var obj = DDLogin({
          id: "ding-login",
          goto: http_url,
          style: "border:none;background-color:#FFFFFF;",
          width: "220",
          height: "300"
        });
        let iframe = this.$refs.ddLogin.getElementsByTagName("iframe")[0];
        iframe.style.transform = "translate(-10px, -45px) scale(.95)";
      });
    },
    dingLoginAuth(code, state) {
      console.log(code, state, "dingLogin");
      this.API.qrCodeLogin({ code: code, state: state }).then(res => {
        window.sessionStorage.setItem("token", res.data.value);
        window.localStorage.setItem("clearInfo", "");
        this.getAllDic();
        this.getAllMenu();
      });
    },
    changeImgCode() {
      let num = Math.ceil(Math.random() * 10); //生成一个随机数（防止缓存）
      this.imgCode = window.api.codeUrl + "?" + num;
    },
    setClientHeightF() {
      let height = window.innerHeight + "px";
      this.$store.dispatch("setClientHeight", height);
    },
    keyupEnter() {
      document.onkeydown = e => {
        let body = document.getElementsByTagName("body")[0];
        if (
          e.keyCode === 13 &&
          e.target.baseURI.match(/inputbook/) &&
          e.target === body
        ) {
          // console.log('enter')
          this.login();
        }
      };
    },
    // 登录
    async login() {
      let validator = new schema(this.rules);
      let valid = true;
      validator.validate(this.loginForm, (errors, fields) => {
        if (errors) {
          valid = false;
          if (errors) {
            this.warningNotify("提示", errors[0].message);
          }
          return handleErrors(errors, fields);
        }
      });
      if (valid) {
        this.loading = true;
        let data = {};
        data.username = this.loginForm.username;
        data.password = md5(this.loginForm.password);
        data.code = this.loginForm.verifyCode;
        await this.API.login(data)
          .then(res => {
            window.sessionStorage.setItem("token", res.data.value);
            window.localStorage.setItem("clearInfo", "");
            this.getAllDic();
            this.getAllMenu();
            this.getSystem();
          })
          .catch(err => {
            this.loading = false;
            this.changeImgCode();
          });
      }
    },
    getSystem() {
      let tem = {
        pageIndex: 1,
        pageSize: 10,
        keyword: ""
      };
      this.API.getSystemSettingPageList(tem).then(ret => {
        this.SystemSettingPageList = ret.data.records[0];
        window.sessionStorage.setItem(
          "system",
          JSON.stringify(ret.data.records[0])
        );
      });
    },
    // 获取用户菜单和按钮权限
    async getAllMenu() {
      await this.API.userResource().then(res => {
        let tem = res.data;
        if (tem) {
          this.getWaitCount(tem.menuLists);
          this.$store
            .dispatch(
              "updateUserRoleKeys",
              tem.buttonLists && tem.buttonLists.length > 0
                ? tem.buttonLists.join(",")
                : ""
            )
            .then(res => {
            });
          sessionStorage.setItem(
            "roleKeys",
            tem.buttonLists && tem.buttonLists.length > 0
              ? tem.buttonLists.join(",")
              : ""
          );
          this.findFirstMenu(tem.menuLists);
          this.$store
            .dispatch("updateLeftMenu", tem.menuLists[0].children)
            .then(res => {
              this.$store
                .dispatch("updateLeftMenuIndex", this.firstMenu.id + "")
                .then(res => {
                });
            });
          this.$router.push(JSON.parse(this.firstMenu.route + ""));
        }
      });
    },
    // 获取待办数据
    getWaitCount(menus) {
      this.API.getAllPrompt().then(res => {
        let tem;
        if (res.data) {
          this.$store.dispatch("updatePromptCount", res.data);
          menus.map(item => {
            this.setMenuCount(item, res.data);
          });
          tem = menus;
        } else {
          tem = menus;
        }
        this.$store.dispatch("updateUserMenus", tem).then(res => {
        });
      });
    },

    // 设置菜单的数量属性
    setMenuCount(item, data) {
      if (data) {
        data.map((waitItem, index) => {
          // console.log(waitItem, index);
          if (waitItem.key === item.key) {
            this.$set(item, "count", waitItem.value);
          } else {
            if (item.children) {
              item.children.map(itemSub => {
                this.setMenuCount(itemSub, data);
              });
            }
          }
        });
      }
    },

    // 查找第一个菜单
    findFirstMenu(data) {
      if (data) {
        data.every(item => {
          console.log(item);
          if (
            (item.children === null || item.children.length === 0) &&
            item.menuType === "Menu"
          ) {
            if (this.firstMenu === null) {
              this.firstMenu = item;
            }
          } else {
            this.findFirstMenu(item.children);
          }
        });
      }
    },
    // 获取所有数据字典
    getAllDic() {
      this.API.dictionaryTree({ parentId: 0 }).then(res => {
        let tem = res.data;
        if (tem) {
          window.sessionStorage.setItem("allDic", JSON.stringify(tem));
        }
      });
    }
  },
  components: {}
};
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import "../../../styles/login";

  .v-modal {
    z-index: 1000 !important;
  }

  .scanSwitch {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  .scanTitle {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
  }

  .changeBtn {
    font-size: 13px;
    padding: 5px 10px;
    background: #ffffff36;
    cursor: pointer;
  }

  .left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .active {
    color: #669e32ff;
    background-color: #ffffff;
  }

  .mobileLogin {
    margin: 10px 0;
  }

  footer {
    color: white;
    z-index: 999;
    position: fixed;
    bottom: 3%;
    left: 50%;
    transform: translate(-50%);
  }

  footer a {
    color: white;
  }
</style>
